<template>
  <div>
     <el-table
      :data="bannerArr"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="轮播图标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="img"
        label="图片">
         <template slot-scope="obj">
        <img :src="'http://localhost:3000'+obj.row.img" alt="#">
      </template>
      </el-table-column>
     
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="obj">
          <el-tag v-show="obj.row.status ==1">启用中</el-tag>
          <el-tag v-show="obj.row.status ==2" type="danger">已禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="obj">
            <el-button type="primary" icon="el-icon-edit" circle @click="updataBanner(obj.row.id)"></el-button>
             <el-button type="danger" icon="el-icon-delete" circle @click="delBanner(obj.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { successMsg, failedMsg } from "../../tools/tools.js";
import {bannerdelete} from '../../request/api.js'
export default {
  props:['bannerArr'],
  methods: {
    updataBanner(id){
      this.$emit('updataBanner',id)
    },
    delBanner(id){
      bannerdelete({id}).then(d=>{
        if(d.data.code == 200){
          successMsg('删除成功')
          this.$emit('canle')
        }else{
          failedMsg('删除失败')
        }
      })
    }
  },
}
</script>

<style scoped>
 img{
  width: 100px;
}
</style>